<template>
	<view class="box">
		<!-- 没有收货地址时显示按钮 -->
		<view class="no-location" v-if="JSON.stringify(address) == '{}'">
			<button type="primary" @click="getAddress">请选择收货地址</button>
		</view>
		<!-- 有收获地址时，显示详细地址 -->
		<view class="show-location" v-else>
			<view class="location-top">
				<view> 收货人：<text>{{address.userName}}</text></view>
				<view> 电话：<text>{{address.telNumber}}</text>
					<uni-icons type="forward"></uni-icons>
				</view>
			</view>

			<view>收货地址:<text>{{addressStr}}</text></view>
		</view>
		<image class="cart-image" src="/static/cart_border@2x.png" mode=""></image>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapGetters,
		mapState
	} from "vuex"

	export default {
		name: "my-location",
		data() {
			return {
				// address: {}
			};
		},
		computed: {
			...mapState('user_m',['address']),
			...mapGetters('user_m',['addressStr'])
			
			// addressStr() {
			// 	return this.address.provinceName + this.address.cityName + this.address.countyName + this.address
			// 		.detailInfo
			// }
		},
		methods: {
			...mapMutations("user_m", ["updateAddress"]),
			async getAddress() {
				const result = await uni.chooseAddress().catch(err => err);
				console.log(result);

				if (result.errMsg == 'chooseAddress:ok') {
					this.updateAddress(result)
				} else {
					return uni.$showMag();
				}

			}
		}
	}

	// cityName: "广州市"
	// countyName: "海珠区"
	// detailInfo: "新港中路397号"
	// errMsg: "chooseAddress:ok"
	// nationalCode: "510000"
	// postalCode: "510000"
	// provinceName: "广东省"
	// telNumber: "020-81167888"
	// userName: "张三"
</script>

<style lang="scss">
	.box {
		position: relative;

		.no-location {
			height: 260rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			button {
				width: 300rpx;
				line-height: 80rpx;
				font-size: 30rpx;

			}
		}

		.show-location {
			height: 260rpx;
			padding: 10rpx;
			font-size: 30rpx;

			.location-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;
				margin-top: 80rpx;
			}

		}

		.cart-image {
			height: 10rpx;
			position: absolute;
			bottom: 0;
		}
	}
</style>
